<template>
  <view>
    <view class="full" @click="closeFull"></view>

    <view class="login-out">
      <view
        ><b>{{ title }}</b></view
      >
      <view>作业时间：</view>
      <view class="work-date" @click="showDate(true)"
        >{{ !form.start ? "开始日期" : form.start }}
        <view class="fr">
          <image src="/static/img/date-icon.png" class="work-date-icon"></image>
        </view>
      </view>
      <view class="work-date" @click="showDate(false)"
        >{{ !form.end ? "结束日期" : form.end }}
        <view class="fr">
          <image src="/static/img/date-icon.png" class="work-date-icon"></image>
        </view>
      </view>

      <view
        >工单编号：
        <u-input class="f-opactiy" type="text" v-model="form.woSn"></u-input>
      </view>
      <view
        >施工计划号：
        <u-input
          class="f-opactiy"
          type="text"
          v-model="form.constructPlanSn"
        ></u-input>
      </view>
      <view @click="show.typeWork = true"
        >工单类别： <text class="text-load">{{ form.woCategory }}</text></view
      >
      <u-select
        v-model="show.typeWork"
        :list="workOrderType"
        label-name="value"
        @confirm="handleOk"
        @cancel="handleCacel"
      ></u-select>
			<view
			  >工单内容：
			  <u-input
			    class="f-opactiy"
			    type="text"
			    v-model="form.constructContent"
			  ></u-input>
			</view>
      <view @click="show.woState = true"
        >状态： <text class="text-load">{{ form.woState }}</text></view
      >
      <u-select
        v-model="show.woState"
        :list="workOrderStateList"
        label-name="value"
        @confirm="statusHand"
        @cancel="statusCancle"
      ></u-select>
      <view @click="show.typeWork1 = true"
        >专业： <text class="text-load">{{ form.major }}</text></view
      >
      <u-select
        v-model="show.typeWork1"
        :list="workProfession"
        label-name="value"
        value-name="code"
        @confirm="handleOk1"
        @cancel="handleCacel1"
      ></u-select>
      <view @click="showORG()"
        >机构：
        <text class="text-load">{{ form.managementOrgName }}</text></view
      >
      <ljs-treeChoose
        :data="departList"
        @getChooseValue="orgchange"
        @close="orgcancle"
        v-if="show.orgShow"
      />
      <view @click="show.lineName = true"
        >线路: <text class="text-load">{{ form.woLine }}</text></view
      >
      <u-select
        v-model="show.lineName"
        :list="lineTree"
        label-name="name"
        value-name="idK"
        @confirm="handleLine"
        @cancel="cancleLine"
      ></u-select>
      <view @click="show.location = true"
        >车站: <text class="text-load">{{ form.location }}</text></view
      >
      <u-select
        v-model="show.location"
        :list="stationList"
        label-name="name"
        value-name="id"
        @confirm="handleLocation"
        @cancel="cancleLocation"
      ></u-select>
      <view class="btn"
        ><button class="cancel-btn" @click="reset"><b>重置</b></button
        ><button class="default-btn fr" @click="ok"><b>确定</b></button></view
      >
    </view>
    <view class="full full2" v-show="show_date"></view>
    <u-picker
      v-model="show_date"
      mode="time"
      :params="params"
      @confirm="setDate"
      @cancel="cancel"
    ></u-picker>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { PMS_DICT_CONTROLLER } from "../../api/pms";

export default {
  props: ["title", "tab"],
  computed: {
    ...mapState([
      "userInfo",
      "workOrderType",
      "workProfession",
      "workOrderState",
      "lineTree",
      "reeByOrgnum",
    ]),
  },

  data() {
    return {
      departList: [],
      workOrderStateList: [],
      stationList: [],
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },

      type: "",

      show_date: false,
      form: {
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        woSn: "",
        location: "",
        woCategory: "",
        woLine: "",
        woState: "",
        constructPlanSn: "",
        managementOrgName: "",
        // managementOrg: "",
        major: "",
      },
      show: {
        woState: false,
        orgShow: false,
        typeWork: false,
        typeWork1: false,
        lineName: false,
        location: false,
      },
      query: {
        woSn: "", // 工单编号
        location: "", // 地点
        woCategory: "", //工单类别
        woLine: "", //  线路
        woState: "", // 工单状态
        constructPlanSn: "", //施工计划号
        // managementOrgName: "上海",
        managementOrg: "",
        major: "", // 专业
        startTime: "", // 开始时间
        endTime: "", // 结束时间
      },
    };
  },
  mounted() {
    this.workOrderStateList = this.workOrderState;
    this.form.managementOrgName = this.userInfo?.org?.name;
    // this.form.major = this.userInfo?.roles && this.userInfo?.roles[0].major
    this.query.managementOrg = this.userInfo?.org?.num;
    // this.query.major = this.userInfo?.roles && this.userInfo?.roles[0].major
  },
  watch: {
    tab: {
      handler(val, old) {
        this.form = {
          startTime: "", // 开始时间
          endTime: "", // 结束时间
          woSn: "",
          location: "",
          woCategory: "",
          woLine: "",
          woState: "",
          constructPlanSn: "",
          managementOrgName: "",
          // managementOrg: "",
          major: "",
        };
        this.query = {
          woSn: "", // 工单编号
          location: "", // 地点
          woCategory: "", //工单类别
          woLine: "", //  线路
          woState: "", // 工单状态
          constructPlanSn: "", //施工计划号
          // managementOrgName: "上海",
          managementOrg: "",
          major: "", // 专业
          startTime: "", // 开始时间
          endTime: "", // 结束时间
        };
        this.workOrderStateList = this.workOrderState.filter((i) => {
          if (val == 0) {
            return i;
          }
          if (val == 1) {
            return i.value == "草稿" || i.value == "已提交";
          }
          if (val == 2) {
            return (
              i.value == "进行中" ||
              i.value == "发布" ||
              i.value == "准备中" ||
              i.value == "接单" ||
              i.value == "审批中" ||
              i.value == "返工" ||
              i.value == "退回派单"
            );
          }
          if (val == 3) {
            return i.value == "已完成";
          }
        });
      },
    },
  },
  methods: {
    returChName(value, options) {
      let name;
      let filterArr = options.filter((item) => item.code == value);
      filterArr.length ? (name = filterArr[0].value) : (name = value);
      // options.filter(item=>item.code==value)[0].value

      return name;
    },
    showORG() {
      let self = this;
      this.show.orgShow = true;
      self.departList = self.reeByOrgnum.map((org) => self.mapTree(org));
    },
    mapTree(org) {
      const haveChildren =
        Array.isArray(org.children) && org.children.length > 0;
      return {
        id: org.orgnum,
        label: org.text,
        openTag: false,
        choose: false,
        children: haveChildren ? org.children.map((i) => this.mapTree(i)) : [],
      };
    },
    statusHand(obj) {
      this.form.woState = obj[0].label;
      this.query.woState = obj[0].value;
    },
    statusCancle() {
      this.show.woState = false;
    },
    orgchange(org, items) {
      console.log(org);
      this.form.managementOrgName = items[items.length - 1].label;
      this.query.managementOrg = items[items.length - 1].id;
      setTimeout(() => {
        this.orgcancle();
      }, 500);
    },
    orgcancle() {
      this.show.orgShow = false;
    },
    handleLocation(obj) {
      this.form.location = obj[0].label;
      this.query.location = obj[0].value;
    },
    cancleLocation() {
      this.show.location = false;
    },
    handleOk(obj) {
      this.form.woCategory = obj[0].label;
      this.query.woCategory = obj[0].value;
    },
    handleOk1(obj) {
      this.form.major = obj[0].label;
      this.query.major = obj[0].value;
    },
    handleCacel() {
      this.show.typeWork = false;
    },
    handleCacel1() {
      this.show.typeWork1 = false;
    },
    handleLine(obj) {
      this.form.woLine = obj[0].label;
      this.query.woLine = obj[0].value;
      if (this.query.woLine) {
        this.fetch(
          "get",
          this.$store.state.baseUrl + PMS_DICT_CONTROLLER.GET_NAME_BY_LINEID,
          {
            lineId: obj[0].value,
            orgNum: this.query?.managementOrg || this.userInfo?.org?.name,
          }
        ).then((res) => {
          if (res?.success) {
            this.stationList = res?.data;
          }
        });
      } else {
        this.stationList = [];
      }
    },
    cancleLine() {
      this.show.lineName = false;
    },
    closeFull() {
      let obj = {
        ...this.query,

        constructPlanSn: this.form.constructPlanSn,
        woSn: this.form.woSn,
      };
      this.$emit("closeFull", obj);
    },
    showDate(bol) {
      this.type = bol;
      this.show_date = true;
    },
    reset() {
      this.stationList = [];
      this.type = "";
      this.form = {
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        woSn: "",
        location: "",
        woCategory: "",
        woLine: "",
        woState: "",
        constructPlanSn: "",
        managementOrgName: this.userInfo?.org?.name,
        // managementOrg: "",
        major: "",
      };
      this.query = {
        woSn: "", // 工单编号
        location: "", // 地点
        woCategory: "", //工单类别
        woLine: "", //  线路
        woState: "", // 工单状态
        constructPlanSn: "", //施工计划号
        // managementOrgName: "上海",
        managementOrg: this.userInfo?.org?.num,
        major: "", // 专业
        startTime: "", // 开始时间
        endTime: "", // 结束时间
      };
    },
    cancel() {
      this.show_date = false;
    },
    ok() {
      let obj = {
        ...this.query,
        startTime: this.form.start,
        endTime: this.form.end,
        constructPlanSn: this.form.constructPlanSn,
        woSn: this.form.woSn,
				constructContent: this.form.constructContent,
      };
      this.$emit("closeFull", obj);
    },
    setDate(obj) {
      let str =
        obj.year +
        "-" +
        obj.month +
        "-" +
        obj.day +
        " " +
        obj.hour +
        ":" +
        obj.minute +
        ":" +
        obj.second;
      this.type ? (this.form.start = str) : (this.form.end = str);
      this.cancel();
    },
  },
};
</script>

<style scoped>
.text-load {
  padding: 0 20px;
  height: 45px;
  line-height: 45px;
}

.login-out {
  padding: 26px 0 0 26px;
}

.login-out > view:nth-child(1) {
  color: #3e3a39;
  margin-bottom: 16px;
}

.login-out > view:nth-child(2) {
  color: #3e3a39;
  font-size: 14px;
  margin-bottom: 12px;
}

.work-date {
  line-height: 50px;
  border-bottom: 1px solid #d7d7d7;
  color: #3e3a39;
  font-size: 14px;
  padding-right: 27px;
}

.work-date-icon {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.btn {
  position: absolute;
  width: 100%;
  bottom: 5%;
  left: 0;
  padding: 0 15px;
}

.default-btn,
.cancel-btn {
  width: 47%;
  display: inline-block;
}

.full2 {
  z-index: 99;
}
</style>
